<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/public.css"/>
		<link rel="stylesheet" type="text/css" href="../css/home.css"/>
		<style type="text/css">
			.mui-table-view-cell{padding: 5px 15px;}
			.menu_list li{background-color: #fff;margin: 10px 0;color: #8c8c8c;}
			.cs_right_info{top: 11px;position: absolute;right: 35px;color: #8c8c8c;font-size: 15px;}
			.cs_menu_item{margin-bottom: 16px;}
			.cs_mg-top_10{margin-top: 10px;}
			.cs_menu_item input{width: 45vw;border: none;outline: none;margin-bottom: 0;}
			.cs_done{font-size: 17px;line-height: 44px;color:rgba(255,255,255,0.4);}
			.tips_t{color: #494949;padding-left: 15px;font-size: 15px;padding-bottom: 40px;}
			.cs_yan_box{background-color: #fb9323;position: absolute;right: 15px;line-height: 30px;margin-top: 5px;color: #fff;padding: 0 15px;border-radius: 15px;height: 30px;}
			.cs_disable{background-color: #9d9d9d !important;}
			.cs-active{color: rgba(255,255,255,1);}
		</style>
		<title>修改密码</title>
	</head>
	<body>
		<header id="header" class="mui-bar mui-bar-nav jjs-header">
			<h2 class="mui-title">修改密码</h2>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left header-left-result"></a>
			<a class="mui-pull-right header-right cs_done">完成</a>
		</header>
		<div class="mui-content cs_nobg cs_mg-top_10">
			<div class="cs_menu_item">
				<ul class="mui-table-view">
				    <li class="mui-table-view-cell">
				    	请输入手机号码
				        <input id="phone" type="text" />
				    </li>
				    <li class="mui-table-view-cell">
				        请输入验证码
				        <input type="text" name="" id="code" value="" />
				        <span class="cs_yan_box" onclick="get_code(this)">获取验证码</span>
				    </li>
				</ul>
			</div>
			<p	class="tips_t">请先获取手机验证，再重置密码</p>
			
			<div class="cs_menu_item">
				<ul class="mui-table-view">
				    <li class="mui-table-view-cell">
				    	新密码
				        <input type="password" id="pwd1" />
				    </li>
				    <li class="mui-table-view-cell">
				                确认密码
				        <input type="password" id="pwd2" />
				    </li>
				</ul>
			</div>
			<p class="tips_t">密码必须至少6个字符，同时包含字母和数字。</p>
		</div>	
		
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var regrealphone = /^1[3|4|5|7|8][0-9]{9}$/;//手机号码
			function get_code () {
				if($('.cs_yan_box').hasClass('cs_disable')){
					return mui.toast('请稍后再试~');
				}
				var phone = $("#phone").val();
				if(!regrealphone.test(phone)){
				 	return	mui.alert('','您输入的的手机号码有误！');
				}
				$.ajax({
					url:'',
					dataType:'json',
					type:'post',
					data:{phone:phone},
					success:function  (ret) {
						if(true){
							mui.toast('验证码发送成功！，有效期xxxxx');
							var nums = 6;
							var timer1 = setInterval(function  () {
								nums--;
								if(nums<1){
									$('.cs_yan_box').removeClass('cs_disable');
									$('.cs_yan_box').text('获取验证码');
									clearInterval(timer1);
									return false;
								}
								$('.cs_yan_box').addClass('cs_disable');
								$('.cs_yan_box').text(nums+'秒后再试')
							},1000)
						}else{
							mui.toast('验证码发送失败！');
						}
					},
					error:function(err){
						console.log(err);
						
						mui.toast('验证码发送成功！，有效期xxxxx');
							var nums = 6;
							var timer1 = setInterval(function  () {
								nums--;
								if(nums<1){
									$('.cs_yan_box').removeClass('cs_disable');
									$('.cs_yan_box').text('获取验证码');
									clearInterval(timer1);
									return false;
								}
								$('.cs_yan_box').addClass('cs_disable');
								$('.cs_yan_box').text(nums+'秒后再试')
							},1000)
						
					}
				})
			}
			
			$('input').blur(function  () {
				if($("#phone").val()=="" || $('#code').val()=="" || $('#pwd1').val()=="" || $('#pwd2').val()==""){
					$('.cs_done').removeClass('cs-active')
				}else{
					$('.cs_done').addClass('cs-active');
				}
			})
			
			$('.cs_done').on('tap',function  () {
				
				if ($(this).hasClass('cs-active')) {
					var phone = $("#phone").val();
					if(!regrealphone.test(phone)){
					 	return	mui.alert('','您输入的的手机号码有误！');
					}
					
					$.ajax({
						url:'',
						dataType:'json',
						type:'post',
						data:{},
						success:function  (ret) {
							console.log(ret);
						},
						error:function  (err) {
							console.log(err)
						}
					})
				} else{
					mui.toast('请填写完整！')
				}
			})
		</script>
	</body>
</html>
